前言

【Day 21】 是介紹 line-bar chart，還有一種常見的圖是雙座標軸折線圖

取得資料

下載死亡率和房價指數兩筆資料

整理資料

• 整理近十年的資料
  

開始畫圖

• 參考【Day 21】的程式碼做修改
• 因為 x 軸是年份，所以要把 x 軸的範圍 scaleBand() 換成 scaleTime()

xScale = d3.scaleTime()
      .domain(d3.extent(data, d => d.年分)) 
      .rangeRound([margin.left, width - margin.right])

• 定義兩條折線圖的 y 軸範圍

y1Scale = d3.scaleLinear()
    .domain([70, d3.max(data, d => d.房價指數) + 20])
    .rangeRound([height - margin.bottom, margin.top])

y2Scale = d3.scaleLinear()
    .domain([6, d3.max(data, d => d.死亡率) + 2])
    .rangeRound([height - margin.bottom, margin.top])

• 修改傳入的資料

line1 = d3.line()
      .x(d => xScale(d.年分))
      .y(d => y1Scale(d.房價指數))

line2 = d3.line()
      .x(d => xScale(d.年分))
      .y(d => y2Scale(d.死亡率))

• 畫圖

chart = {
  // 建立 svg，指定尺寸
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  // 加入 y 軸直線
  svg.append("path")
      .attr("fill", "none")
      .attr("stroke", "black")
      .attr("stroke-miterlimit", 1) 
      .attr("stroke-width", 5)
      .attr("d", line1(data));

    svg.append("path")
      .attr("fill", "none")
      .attr("stroke", "blue")
      .attr("stroke-miterlimit", 1) 
      .attr("stroke-width", 5)
      .attr("d", line2(data));

  // 加入 x 軸
  svg.append("g")
      .call(xAxis)
      .attr("font-size", 10);

  // 加入 y1 軸
  svg.append("g")
      .call(y1Axis)
      .attr("font-size", 10);

  // 加入 y2 軸
  svg.append("g")
      .call(y2Axis)
      .attr("font-size", 10);

  return svg.node();
}

結論

相較於十年前房價指數上升 50，死亡率上升 2.2。